<!DOCTYPE html>
<html>
<head>
	<title>机器人激光导航系统</title>
	<meta 	charset="UTF-8">
	<meta 	name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- CSS -->
	<link href="css/jquery.mobile-1.4.2.min.css" rel="stylesheet">
	<!-- jQuery and display.js are conveniences for interacting with the DOM -->
	<script src="js/jquery/jquery-2.1.0.js"></script>
	<script src="js/jquery/jquery.mobile-1.4.2.min.js"></script>
	<!-- FLOTCHART -->
	<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>

	<!-- ROSLIBJS -->
	<!-- EventEmitter2 is the sole dependency of roslibjs -->
	<script src="js/ros/eventemitter2/eventemitter2.js"></script>
	<!-- Roslibjs handles core ROS functionality in the browser -->
	<script src="js/ros/roslibjs/roslib.js"></script>

	<!-- ROS2DJS -->
	<!-- EaselJS is a dependency of ros2djs -->
	<script src="js/ros/easeljs/easeljs.js"></script>
	<!-- Ros2djs provides 2D scene support, including mapping and more -->
	<script src="js/ros/ros2djs/ros2d.js"></script>

	<!-- ROS3DJS -->
	<!-- Three.js is the WebGL rendering library -->
	<script src="js/ros/three/three.js"></script>
	<!-- ColladaLoader loads collada models of the robot -->
	<script src="js/ros/ColladaLoader/ColladaLoader.min.js"></script>
	<!-- STLLoader loads STL models of the robot -->
	<script src="js/ros/STLLoader/STLLoader.min.js"></script>
	<!-- Ros3djs provides 3D scene support, including mapping and more -->
	<script src="js/ros/ros3djs/ros3d.js"></script>

	<!-- Console ROS -->
	<script src="js/console/chart.js"></script>
	<script src="js/console/Pages.js"></script>
	<script src="js/console/ROScontroller.js"></script>
	<script src="js/console/ROS2Dmap.js"></script>
	<script src="js/console/ROS3Dmap.js"></script>

	<script src="js/console/drive/DriveController.js"></script>
	<script src="js/console/drive/Vector2.js"></script>
	<script src="js/console/drive/Touch.js"></script>
	<script src="js/console/drive/Keyboard.js"></script>

	<script>
		$(document).ready(function() {
			// Check WebGL on broswer
			var hasWebGl = window.WebGLRenderingContext ? true : false;
			var name_page = "机器人激光导航系统";
			var name_robot = "192.168.31.119";

			// ROS Controller
			var ros = ROScontroller("console", {
				addr: name_robot
			});

			var poseTopic = new ROSLIB.Topic({
				ros: ros,
				name: '/lizard_velocity_controller/odom',
				messageType: 'nav_msgs/Odometry'
			});

			poseTopic.subscribe(function(message) {

				var pose = message.pose.pose.position;
				var orien = message.pose.pose.orientation;
				var vel = message.twist.twist;
			});

			var widthPage = $(window).width() - 16 * 2;
			var heightPage = $(window).height() - 16 * 2 - 10;
			if (hasWebGl) {
				// 3D MAP
				ROS3Dmap(ros, {
					width: widthPage,
					height: heightPage,
					path: '192.168.31.119'
				});
			}
		});
	</script>
</head>
<body>
	<!-- pages -->
	<!-- HOME PAGE -->
	<div data-role="page" id="home" data-title="Home" data-icon="home">	
		<div data-role="content">
			<div id="threed-map"></div>
			<div id="twod-map" class="map2D"></div>
			<div id="mjpeg" class="border"></div>
		</div>
	</div>
</body>
</html>